<template>
  <a-row :gutter="48">
    <a-col :md="24" :sm="24">
      <a-card :bordered="false">
        <div class="table-operator">
          <a-tabs default-active-key="1">
            <a-tab-pane key="1" tab="全部">Content of Tab Pane 1</a-tab-pane>
            <a-tab-pane key="2" tab="草稿" force-render>Content of Tab Pane 2</a-tab-pane>
            <a-tab-pane key="3" tab="加工中">Content of Tab Pane 1</a-tab-pane>
            <a-tab-pane key="4" tab="已完工">Content of Tab Pane 2</a-tab-pane>
            <a-tab-pane key="5" tab="已作废">Content of Tab Pane 1</a-tab-pane>
            <a-button slot="tabBarExtraContent">Extra Action</a-button>
          </a-tabs>

          <!-- 表格(公共组件) -->
          <div style="display:flex;justify-content:space-between">
            <div class="left">
              <div style="padding-top:20px">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                  <el-form-item label="产品名称：">
                    <el-input v-model="formInline.MaterialName"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button type="primary" @click="onReset">重置</el-button>
                  </el-form-item>
                </el-form>
              </div>
              <el-table
                :data="tableData"
                border
                style="width: 100%"
                highlight-current-row
                @current-change="clickRow"
                :header-cell-style="style"
              >
                <el-table-column prop="Code" label="订单号"></el-table-column>
                <el-table-column prop="MaterialName" label="产品名称"></el-table-column>
                <el-table-column prop="Model" label="型号"></el-table-column>
                <el-table-column prop="Model" label="订单数"></el-table-column>
                <el-table-column prop="Spec" label="下达日期"></el-table-column>
                <el-table-column prop="MaterialType" label="交期"></el-table-column>
              </el-table>
              <el-pagination
                style="margin-top:10px"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="100"
                layout="total, prev, pager, next"
                :total="1000"
              ></el-pagination>
            </div>
            <div class="right">
              <div style="padding-top:20px">
                <el-form :inline="true" :model="form" class="demo-form-inline">
                  <el-form-item label="订单号：">
                    <el-input v-model="form.Code" readonly="readonly"></el-input>
                  </el-form-item>
                  <el-form-item label="产品名称：">
                    <el-input v-model="form.MaterialName" readonly="readonly"></el-input>
                  </el-form-item>
                </el-form>
              </div>
              <el-table
                :data="processData"
                border
                style="width: 100%"
                highlight-current-row
                @current-change="clickRow"
                :header-cell-style="style"
              >
                <el-table-column prop="Code" label="工序名称"></el-table-column>
                <el-table-column prop="Code" label="工序编号"></el-table-column>
                <el-table-column prop="MaterialName" label="开始日期"></el-table-column>
                <el-table-column prop="Model" label="结束日期"></el-table-column>
                <el-table-column prop="Spec" label="订单数"></el-table-column>
                <el-table-column prop="MaterialType" label="完成数"></el-table-column>
                <el-table-column prop="MaterialType" label="欠数"></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
export default {
  components: {},
  mounted() {},
  data() {
    return {
      formInline: {
        MaterialName: ''
      },
      form: {
        Code: '',
        MaterialName: ''
      },
      tableData: [
        {
          Code: '433',
          MaterialName: '不锈钢',
          Model: '434231',
          Spec: '565765786',
          MaterialType: '54634563'
        },
        {
          Code: '433',
          MaterialName: '电水壶',
          Model: '434231',
          Spec: '565765786',
          MaterialType: '54634563'
        },
        {
          Code: '433',
          MaterialName: '电饼铛',
          Model: '434231',
          Spec: '565765786',
          MaterialType: '54634563'
        }
      ],
      processData: [],
      currentRow: null,
      currentPage: 1,
      style: {
        background: '#eeeeee',
        color: '#333',
        fontWeight: 500
      }
    }
  },
  methods: {
    onSubmit() {},
    onReset() {},
    //单击行事件
    clickRow(val) {
      this.currentRow = val
      this.form.Code = this.currentRow.Code
      this.form.MaterialName = this.currentRow.MaterialName
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>


<style>
.left,
.right {
  width: 49.5%;
  padding: 20px;
  background: #ffffff;
}
.el-table td,
.el-table th {
  padding: 6px 0;
}
</style>
